<template id="tmp-item-info-box">
    <span v-if="item">
        <el-tooltip class="item" effect="dark" placement="right-end">
            <div class="item_info_box" slot="content">
                <div style="font-size: 18px" class="mb-1">
                    <component-item-name :nobg="1" :name="item.name" :quality="item.Quality"></component-item-name>
                </div>
                <div v-if="item.bonding>0">
                    @{{ item.bonding | bonding }}
                </div>
                <div v-if="item.duration>0">
                    持续时间 @{{ item.duration | duration }} @{{ item.flagsCustom | flagsCustom }}
                </div>

                <div v-if="item.class==2">
{{--                    <br> 装备位置：@{{ item.InventoryType | InventoryType }}--}}

                    <el-row>
                      <el-col :span="12"><div>@{{ item.InventoryType | InventoryType }}</div></el-col>
                      <el-col :span="12"><div style="text-align: end"><component-item-class-show :item="item"></component-item-class-show></div></el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12"><div>@{{ item.dmg_min1 }} - @{{ item.dmg_max1 }} 伤害</div></el-col>
                      <el-col :span="12"><div style="text-align: end">速度 @{{ item.delay/1000 }}</div></el-col>
                    </el-row>

                    <div v-if="item.dmg_type2>0">
                        + @{{ item.dmg_min2 }} - @{{ item.dmg_max2 }} @{{ item.dmg_type2|dmg_type }}伤害
                    </div>

                    <component-item-stats-show :item="item"></component-item-stats-show>

                    <div v-if="item.MaxDurability>0">
                        耐久度 @{{ item.MaxDurability }}
                    </div>
                </div>
                <div v-else-if="item.class==4">
                    <el-row>
                      <el-col :span="12"><div>@{{ item.InventoryType | InventoryType }}</div></el-col>
                      <el-col :span="12"><div style="text-align: end"><component-item-class-show :item="item"></component-item-class-show></div></el-col>
                    </el-row>

                    <div v-if="item.armor>0">
                        @{{ item.armor }} 护甲
                    </div>
                    <div v-if="item.block>0">
                        @{{ item.block }} 格挡
                    </div>

                    <component-item-stats-show :item="item"></component-item-stats-show>

                    <div v-if="item.MaxDurability>0">
                        耐久度 @{{ item.MaxDurability }}
                    </div>
                </div>
                <div v-else>
                    <component-item-stats-show :item="item"></component-item-stats-show>
                    <br>堆叠数量 @{{ item.stackable }}
                </div>
                <div v-if="item.RequiredLevel>0">
                    需要等级 @{{ item.RequiredLevel }}
                </div>
                <div >
                    物品等级 @{{ item.ItemLevel }}
                </div>
                <div class="description" v-if="item.description">
                    "@{{ item.description }}"
                </div>

                <br>

                <a target="_blank" :href="'http://db.wowmanage.cn/?item='+item.entry">完整数据</a>

            </div>
            <slot></slot>
        </el-tooltip>
    </span>
</template>
<script>
    Vue.component("component-item-info-box", {
        template:"#tmp-item-info-box",
        props:["item"],
        data() {
            return {
            };
        },
        filters:{
            itemClass(item,itemClass){
                let res='';
                itemClass.forEach(e=>{
                    if(parseInt(e.value) === item.class){
                        res=e.label;
                        e.children.forEach(ce=>{
                            if(ce.value===(item.class+'_'+item.subclass)){
                                res+=' / '+ce.label;
                            }
                        });
                    }
                });
                return res;
            },
            dmg_type(value){
                switch (value) {
                    case 0:
                        return ''
                    case 1:
                        return '神圣'
                    case 2:
                        return '火焰'
                    case 3:
                        return '自然'
                    case 4:
                        return '冰霜'
                    case 5:
                        return '暗影'
                    case 6:
                        return '奥术'
                }
            },
            flagsCustom(value){
                switch (value) {
                    case 0:
                        return '游戏时间'
                    case 1:
                        return '真实时间'
                }
            },
            duration(s){
                let t = '';
                let l=0;
                if(s > 0){
                    let day = Math.floor(s/3600/24)
                    let hour = Math.floor(s/3600) % 24
                    let min = Math.floor(s/60) % 60
                    let sec = s % 60
                    if (min>0) l=1
                    if (hour>0) l=2
                    if (day>0) l=3
                    t=sec+'s'
                    if (l>=1) t=min+'m '+t
                    if (l>=2) t=hour+'h '+t
                    if (l>=3) t=day+'d '+t
                }
                return t
            },
            bonding(value){
                switch (value) {
                    case 0: return ''
                    case 1: return '拾取绑定'
                    case 2: return '装备绑定'
                    case 3: return '使用绑定'
                    case 4: return '任务物品'
                    case 5: return '任务物品'
                }
            },
            InventoryType(value){
                switch (value) {
                    case 0: return '';
                    case 1: return '头';
                    case 2: return '脖子';
                    case 3: return '肩膀';
                    case 4: return '身体';
                    case 5: return '胸部';
                    case 6: return '腰';
                    case 7: return '腿';
                    case 8: return '脚';
                    case 9: return '手腕';
                    case 10: return '手';
                    case 11: return '手指';
                    case 12: return '饰品';
                    case 13: return '武器';
                    case 14: return '盾';
                    case 15: return '不等';
                    case 16: return '披风';
                    case 17: return '双手武器';
                    case 18: return '背包';
                    case 19: return '粗呢大衣';
                    case 20: return '长袍';
                    case 21: return '主手武器';
                    case 22: return '副手手武器';
                    case 23: return 'HOLDABL';
                    case 24: return '弹药';
                    case 25: return '投掷';
                    case 26: return '远程';
                    case 27: return '箭袋';
                    case 28: return '圣物';
                }
            }
        },
    });
</script>
<style>
    .badge{
        /*padding: 0.4em 0.9em;*/
        font-size: 100%;
    }

    .item_info_box{
        font-size: 14px;
        max-width: 300px;
        min-width: 200px;
    }
    .item_info_box div{
        margin-top: 3px;
    }
    .item_info_box .description {
       color: #ffd100 !important
    }
    .badge-quality0{
        color: rgb(157,157,157);
        background-color: rgb(8,13,34);
    }
    .badge-quality1{
        color: rgb(157,157,157);
        background-color: rgb(8,13,34);
    }
    .badge-quality2{
        color: rgb(24,244,9);
        background-color: rgb(8,13,34);
    }
    .badge-quality3{
        color: rgb(2,101,215);
        background-color: rgb(8,13,34);
    }
    .badge-quality4{
        color: rgb(163,53,238);
        background-color: rgb(8,13,34);
    }
    .badge-quality5{
        color: rgb(255,128,0);
        background-color: rgb(8,13,34);
    }
    .badge-quality6{
        color: rgb(222,195,122);
        background-color: rgb(8,13,34);
    }
</style>
